<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>后台管理</title>
    <link rel="stylesheet" href="__LAY__/css/layui.css" media="all" />
    <link rel="icon" href="favicon.ico">
    <style>
        * { margin: 0; padding: 0; }
        html { height: 100%; }
        *body { height: 100%; background: #fff url(/static/login/images/backgroud.png) 50% 50% no-repeat; background-size: cover;}
        .dowebok { position: absolute; left: 50%; top: 50%; width: 430px; height: 550px; margin: -300px 0 0 -215px; border: 1px solid #ad6565; border-radius: 20px; overflow: hidden;background-color: #32bb6d;}
        .logo { width: 104px; height: 104px; margin: 50px auto 80px; background: url(/static/login/images/login.png) 0 0 no-repeat; }
        .form-item { position: relative; width: 360px; margin: 0 auto; padding-bottom: 30px;}
        .form-item input { width: 288px; height: 48px; padding-left: 70px; border: 1px solid #fff; border-radius: 25px; font-size: 18px; color: #fff; background-color: transparent; outline: none;}
        .form-item button { width: 360px; height: 50px; border: 0; border-radius: 25px; font-size: 18px; color: #1f6f4a; outline: none; cursor: pointer; background-color: #fff; }
        #username { background: url(/static/login/images/emil.png) 20px 14px no-repeat; }
        #password { background: url(/static/login/images/password.png) 23px 11px no-repeat; }
        .tip { display: none; position: absolute; left: 20px; top: 52px; font-size: 14px; color: #f50; }
        .reg-bar { width: 360px; margin: 20px auto 0; font-size: 14px; overflow: hidden;}
        .reg-bar a { color: #fff; text-decoration: none; }
        .reg-bar a:hover { text-decoration: underline; }
        .reg-bar .reg { float: left; }
        .reg-bar .forget { float: right; }
        .dowebok ::-webkit-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok ::-moz-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}
        .dowebok :-ms-input-placeholder { font-size: 18px; line-height: 1.4; color: #fff;}

        @media screen and (max-width: 500px) {
            * { box-sizing: border-box; }
            .dowebok { position: static; width: auto; height: auto; margin: 0 30px; border: 0; border-radius: 0; }
            .logo { margin: 50px auto; }
            .form-item { width: auto; }
            .form-item input, .form-item button, .reg-bar { width: 100%; }
        }
    </style>
</head>
<body>
<div class="dowebok">
    <div class="logo"></div>
    <form class="layui-form layui-form-pane" id="commentForm" method="post" action="{:url('login/loginin')}">
    <div class="form-item">
        <input id="username" type="text" name="username" autocomplete="off" placeholder="用户名">
        <p class="tip">请输入登录名</p>
    </div>
    <div class="form-item">
        <input id="password" type="password" name="password" autocomplete="off" placeholder="登录密码">
        <p class="tip">请输入密码</p>
    </div>
    <div class="form-item"><button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button></div>
    </form>
</div>
<script type="text/javascript" src="__JS__/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="__LAY__/layui.js"></script>
<script type="text/javascript" src="__JS__/jquery.form.js"></script>
<script src="https://cdn.bootcss.com/limonte-sweetalert2/7.21.1/sweetalert2.all.js"></script>
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
    });
    var index = '';
    function showStart(){
        index = layer.load(0, {shade: false});
        return true;
    }
    function showSuccess(res){
        layer.ready(function(){
            layer.close(index);
            if(1 == res.code){
                swal({
                    title: res.msg,
                    timer: 2000,
                    type: 'success'
                }).then(
                    function (dismiss) {
                        window.location.href = res.data;
                    }
                );
            }else if(111 == res.code){
                window.location.reload();
            }else{
                sweetAlert(
                    '扑捉到一枚坏蛋',
                    ''+res.msg+'',
                    'error'
                );
            }
        });
    }
    $(document).ready(function(){

        var options = {
            beforeSubmit:showStart,
            success:showSuccess
        };
        $('#commentForm').submit(function(){
            //下拉框监控事件
            $(this).ajaxSubmit(options);
            return false;
        });
    });
</script>
</body>
</html>
